<template>
  <div class="boss">
    <div id="map"></div>
    <div class="marking">
      <div class="d1">
        <p :class="{ p1: isActive1 }" @click="p1choose()"></p>
        <div>产量≥400kg</div>
      </div>
      <div class="d2">
        <p :class="{ p2: isActive2 }" @click="p2choose()"></p>
        <div>300kg≤产量＜400kg</div>
      </div>
      <div class="d3">
        <p :class="{ p3: isActive3 }" @click="p3choose()"></p>
        <div>产量＜300kg</div>
      </div>
    </div>
  </div>
</template>

<script>
import { MapDataApi } from "../../api/homeApi";

import * as echarts from "echarts";
import "echarts/extension/bmap/bmap";
// 基于准备好的dom，初始化echarts实例

export default {
  data() {
    return {
      mapArr: [],
      isActive1: true,
      isActive2: true,
      isActive3: true,
      mapArr1: [],
    };
  },
  mounted() {
    this.MapData();
    // this.isEcharts(this.mapArr);
  },
  component: {
    // arr1() {
    //   return this.mapArr.filter((item) => item.value[2] >= 400);
    // },
    // arr2() {
    //   return this.mapArr.filter(
    //     (item) => item.value[2] < 400 && item.value[2] >= 300
    //   );
    // },
    // arr3() {
    //   return this.mapArr.filter((item) => item.value[2] < 300);
    // },
  },
  methods: {
    MapData(val) {
      MapDataApi(val).then((res) => {
        //发送ajax请求
        if (res.code == 200) {
          this.mapArr = res.data;
          var Arr = [];
          this.mapArr.forEach((item) => {
            Arr.push({
              name: item.name,
              value: [
                item.geoCoordMap[0],
                item.geoCoordMap[1],
                item.value,
                item.id,
              ],
            });
          });
          this.mapArr = Arr;
          this.isEcharts(this.mapArr);
        }
      });
    },
    isEcharts(mapArr) {
      var myChart = echarts.init(document.getElementById("map"));
      myChart.setOption({
        title: {
          text: "大棚分布-产量标识图",
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        bmap: {
          key: "xXF90RjDMAWgztyGQPhnqcBfXSPwz5Td",
          center: [104.114129, 37.550339],
          zoom: 5,
          roam: true,
          mapStyle: {
            styleJson: [
              {
                featureType: "water",
                elementType: "all",
                stylers: {
                  // color: "#d1d1d1",
                },
              },
              {
                featureType: "land",
                elementType: "all",
                stylers: {
                  color: "#f3f3f3",
                },
              },
              {
                featureType: "railway",
                elementType: "all",
                stylers: {
                  visibility: "off",
                },
              },
              {
                featureType: "highway",
                elementType: "all",
                stylers: {
                  color: "#fdfdfd",
                },
              },
              {
                featureType: "highway",
                elementType: "labels",
                stylers: {
                  visibility: "off",
                },
              },
              {
                featureType: "arterial",
                elementType: "geometry",
                stylers: {
                  color: "#fefefe",
                },
              },
              {
                featureType: "arterial",
                elementType: "geometry.fill",
                stylers: {
                  color: "#fefefe",
                },
              },
              {
                featureType: "poi",
                elementType: "all",
                stylers: {
                  visibility: "off",
                },
              },
              {
                featureType: "green",
                elementType: "all",
                stylers: {
                  visibility: "off",
                },
              },
              {
                featureType: "subway",
                elementType: "all",
                stylers: {
                  visibility: "off",
                },
              },
              {
                featureType: "manmade",
                elementType: "all",
                stylers: {
                  color: "#d1d1d1",
                },
              },
              {
                featureType: "local",
                elementType: "all",
                stylers: {
                  color: "#d1d1d1",
                },
              },
              {
                featureType: "arterial",
                elementType: "labels",
                stylers: {
                  visibility: "off",
                },
              },
              {
                featureType: "boundary",
                elementType: "all",
                stylers: {
                  color: "#fefefe",
                },
              },
              {
                featureType: "building",
                elementType: "all",
                stylers: {
                  color: "#d1d1d1",
                },
              },
              {
                featureType: "label",
                elementType: "labels.text.fill",
                stylers: {
                  color: "#999999",
                },
              },
            ],
          },
        },
        series: [
          {
            name: "产量",
            type: "effectScatter",
            coordinateSystem: "bmap",
            data: mapArr,
            symbolSize: function (data) {
              var num = data[2] / 20;
              num = Math.min(Math.max(num, 10), 200);
              return num;
            },
            encode: {
              value: 2,
            },
            showEffectOn: "render",
            rippleEffect: {
              brushType: "stroke",
            },
            label: {
              formatter: "{b}",
              position: "right",
              show: true,
            },
            itemStyle: {
              shadowBlur: 10,
              normal: {
                color: (data) => {
                  data = data.value;
                  var color = "";
                  if (data[2] >= 400) {
                    color = "#83cbac";
                  } else if (data[2] >= 300) {
                    color = "#1e9eb3";
                  } else {
                    color = "#ed2f6a";
                  }
                  return color;
                },
              },
            },
            emphasis: {
              scale: true,
            },
            zlevel: 1,
          },
        ],
      });
      myChart.on("click", (params) => {
        this.$router.push("/layout/detail?id=" + params.value[3]);
      });
    },
    p1choose() {
      // this.mapArr1 = [];
      this.isActive1 = !this.isActive1;
      var arr = [];
      var arr1 = this.mapArr.filter((item) => item.value[2] >= 400);
      var arr2 = this.mapArr.filter(
        (item) => item.value[2] < 400 && item.value[2] >= 300
      );
      var arr3 = this.mapArr.filter((item) => item.value[2] < 300);
      arr = this.isActive1 ? arr.concat(arr1) : arr;
      arr = this.isActive2 ? arr.concat(arr2) : arr;
      arr = this.isActive3 ? arr.concat(arr3) : arr;
      this.isEcharts(arr);
    },
    p2choose() {
      // this.isActive2 ? this.isEcharts(arr) : this.isEcharts(this.mapArr);
      this.isActive2 = !this.isActive2;
      var arr = [];
      var arr1 = this.mapArr.filter((item) => item.value[2] >= 400);
      var arr2 = this.mapArr.filter(
        (item) => item.value[2] < 400 && item.value[2] >= 300
      );
      var arr3 = this.mapArr.filter((item) => item.value[2] < 300);
      arr = this.isActive1 ? arr.concat(arr1) : arr;
      arr = this.isActive2 ? arr.concat(arr2) : arr;
      arr = this.isActive3 ? arr.concat(arr3) : arr;
      this.isEcharts(arr);
    },
    p3choose() {
      // this.isActive3 ? this.isEcharts(arr) : this.isEcharts(this.mapArr);
      this.isActive3 = !this.isActive3;
      var arr = [];
      var arr1 = this.mapArr.filter((item) => item.value[2] >= 400);
      var arr2 = this.mapArr.filter(
        (item) => item.value[2] < 400 && item.value[2] >= 300
      );
      var arr3 = this.mapArr.filter((item) => item.value[2] < 300);
      arr = this.isActive1 ? arr.concat(arr1) : arr;
      arr = this.isActive2 ? arr.concat(arr2) : arr;
      arr = this.isActive3 ? arr.concat(arr3) : arr;
      this.isEcharts(arr);
    },
  },
};
</script>

<style lang="less" scoped>
.boss {
  width: 100%;
  height: 100%;
  //   overflow: hidden;
  position: relative;
}
#map {
  width: 100%;
  height: 100%;
  transform: scale(1);
}
.marking {
  position: absolute;
  top: 5px;
  left: 5px;
  font-size: 12px;
  p {
    height: 20px;
    width: 40px;
    border-radius: 8px;
    margin-right: 5px;
    background-color: #9c9fa0;
  }
  // .p1,
  // .p2,
  // .p3 {
  //   height: 20px;
  //   width: 40px;
  //   border-radius: 8px;
  //   margin-right: 5px;
  // }

  .d1 {
    color: #83cbac;
    display: flex;
    margin-bottom: 5px;
    align-items: center;
    cursor: pointer;
    cursor: pointer;
    .p1 {
      background-color: #83cbac;
    }
  }
  .d2 {
    color: #1e9eb3;
    display: flex;
    margin-bottom: 5px;
    cursor: pointer;
    align-items: center;
    .p2 {
      background-color: #1e9eb3;
    }
  }
  .d3 {
    color: #ed2f6a;
    display: flex;
    margin-bottom: 5px;
    cursor: pointer;
    align-items: center;
    .p3 {
      background-color: #ed2f6a;
    }
  }
}
</style>